/**
* 基础菜单 菜单管理
*/
<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>菜单管理</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 搜索筛选 -->
    <el-form :inline="true" :model="formInline"  ref="formInline" class="user-search" >
      <el-form-item label="搜索：" prop="menuName">
        <el-input size="small" v-model="formInline.menuName" placeholder="请输入菜单名称" @keyup.enter.native="search"></el-input>
      </el-form-item>


      <el-form-item>
        <el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button> <el-button size="small" type="primary" icon="el-icon-delete" @click="clearForm">清空</el-button>
      </el-form-item>

    </el-form>

    <el-row size="small">
      <el-button size="small" type="primary" icon="el-icon-plus" @click="addMenu" v-has="'sys:menu:add'">添加</el-button>
    </el-row>
    <br>

    <!-- 菜单列表 -->
    <el-table
      v-loading="loading"
      :data="menuData"
      row-key="id"
      default-expand-all
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}">

      <el-table-column align="left"  prop="label" label="菜单名称" width="160">
      </el-table-column>

      <el-table-column align="center"  prop="icon" label="菜单图标" width="140">
        <template slot-scope="scope">
          <i class="iconfont" :class="scope.row.icon"></i>
        </template>
      </el-table-column>

      <el-table-column align="center"  prop="menuType" label="菜单类型" width="120">
        <template slot-scope="scope">

          <el-tag  v-if="scope.row.menuType==0">目录</el-tag>
          <el-tag type="success" v-else-if="scope.row.menuType==1">菜单</el-tag>
          <el-tag type="info" v-else="scope.row.menuType==2">按钮</el-tag>
        </template>
      </el-table-column>

      <el-table-column align="center"  prop="perms" label="权限标识" width="200">
      </el-table-column>

      <el-table-column align="center"  prop="url" label="路由地址" width="140">
      </el-table-column>

      <el-table-column align="center"  prop="orderNum" label="菜单排序" width="120">
      </el-table-column>



      <el-table-column label="操作" min-width="180">
        <template slot-scope="scope">
          <el-button size="mini" type="success"  icon="el-icon-edit" @click="editMenu(scope.$index, scope.row)" v-has="'sys:menu:edit'">编辑</el-button>
          <el-button size="mini" type="primary" icon="el-icon-plus"  @click="addMenu(scope.row)" v-has="'sys:menu:add'">新增</el-button>
          <el-button size="mini" type="danger" icon="el-icon-delete"  @click="deleteDept(scope.$index, scope.row)" v-has="'sys:menu:delete'">删除</el-button>
        </template>
      </el-table-column>
    </el-table>



    <!-- 添加编辑界面 -->
    <el-dialog :title="title" :visible.sync="menuFormVisible" width="30%" @click='closeDialog("edit")'>
      <el-form label-width="80px" ref="menuForm" :model="menuForm" :rules="menuFormRules">

        <el-form-item label="上级菜单" prop="parentId" v-if="menuForm.parentId!=0">
          <tree-select v-model="menuForm.parentId" :options="menuOptions" placeholder="选择上级菜单" />
        </el-form-item>

        <el-form-item label="菜单名称" prop="menuName">
          <el-input size="small" v-model="menuForm.menuName"  placeholder="请输入菜单名称"></el-input>
        </el-form-item>
        <el-form-item label="菜单icon" prop="icon">
          <el-select v-model="menuForm.icon" placeholder="请选择" size="medium">
            <el-option
              v-for="item in icons"
              :key="item.value"
              :label="item.label"
              :value="item.value">
              <span style="float: left">{{ item.label }}</span>
              <i class="iconfont" :class="item.value" style="float: right"></i>
            </el-option>
          </el-select>

        </el-form-item>

        <el-form-item label="菜单类型" prop="menuType">
          <el-radio v-model="menuForm.menuType" :label="0" >目录</el-radio>
          <el-radio v-model="menuForm.menuType" :label="1">菜单</el-radio>
          <el-radio v-model="menuForm.menuType" :label="2">按钮</el-radio>
        </el-form-item>

        <el-form-item label="路由地址" prop="url" v-if="menuForm.menuType=='1'">
          <el-input size="small" v-model="menuForm.url"  placeholder="请输入地址"></el-input>
        </el-form-item>

        <el-form-item label="权限标识" prop="perms" v-if="menuForm.menuType !='0'">
          <el-input size="small" v-model="menuForm.perms"  placeholder="请输入权限标识"></el-input>
        </el-form-item>

        <el-form-item label="菜单排序" prop="orderNum">
          <el-input-number size="small" v-model="menuForm.orderNum"  controls-position="right"  :min="1" ></el-input-number>
        </el-form-item>


        <el-form-item label="备注" prop="remark">
          <el-input size="small" v-model="menuForm.remark"  placeholder="请输入备注"></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click='closeDialog("edit")'>取消</el-button>
        <el-button size="small" type="primary" :loading="loading" class="title" @click="submitForm('menuForm')">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import TreeSelect from '@riophae/vue-treeselect'
  import '@riophae/vue-treeselect/dist/vue-treeselect.css'
  export default {
    // 注册组件
    components: {
      TreeSelect
    },
    data() {
      return {
        // 请求数据参数
        formInline: {
          page: 1,
          pageSize: 10,
          menuName: ''
        },
        loading: false, //是显示加载
        menuFormVisible: false, //控制用户添加页面显示与隐藏
        title: "添加用户",
        menuData:[], // 用户列表数据
        menuOptions:[], // 部门下拉列表数据
        selectData: [], // 选择数据
        menuForm:{
          menuId:'',
          parentId:'',
          menuName:'',
          orderNum:'',
          menuType:undefined,
          perms:"",
          icon:"",
          url:"",
          remark:""
        },
        icons: [{
          value: 'li-icon-jichuguanli',
          label: 'li-icon-jichuguanli'
        }, {
          value: 'icon-cms-manage',
          label: 'icon-cms-manage'
        }, {
          value: 'li-icon-xitongguanli',
          label: 'li-icon-xitongguanli'
        }, {
          value: 'icon-cus-manage',
          label: 'icon-cus-manage'
        }, {
          value: 'icon-news-manage',
          label: 'icon-news-manage'
        }],
        // rules表单验证
        menuFormRules: {
          menuName: [
            { required: true, message: '请输入菜单名称', trigger: 'blur' }
          ],
          orderNum: [
            { required: true, message: '请输入岗位排序', trigger: 'blur' },
            {
              pattern: /^[1-9]*[0-9]*$/,
              required: true,
              message: '请输入正确正整数',
              trigger: 'blur'
            }
          ],
          menuType: [
            { required: true, message: '请选择菜单类型', trigger: 'blur' }
          ]
        },
      }
    },
    created(){
      this.getMenuList()
    },
    methods: {
      search(){
        this.getMenuList()
      },
      clearForm(){
        if (this.$refs['formInline']) {
          this.$refs['formInline'].resetFields()
        }
        this.getMenuList()
      },
      getMenuList(){
        this.loading = true;
        this.$axios.getMenuList(this.formInline).then(res=>{
          this.loading=false
          if (res.code === 0) {
            this.menuData=res.data;
          }

        }).catch(err=>{
          this.loading=false
          console.log("getMenuListErr",err);
        })
      },
      // 选择复选框事件
      selectChange(val) {
        this.selectData = val
        console.log('selectData',this.selectData)
      },
      editMenu(index,row){
        this.menuFormVisible = true
        this.title="编辑菜单"
        if (this.$refs['menuForm']) {
          this.$refs['menuForm'].resetFields()
        }
        this.getMenuTreeList();
        this.menuForm.menuId=row.id
        this.menuForm.parentId=row.parentId
        this.menuForm.menuName=row.label
        this.menuForm.orderNum=row.orderNum
        this.menuForm.url=row.url
        this.menuForm.menuType=row.menuType
        this.menuForm.remark=row.remark
        this.menuForm.icon=row.icon
        this.menuForm.perms=row.perms

        // 此处有坑如果服务器返回的是字符串的需要转Number不然不会回显
       // this.deptForm.status=Number(row.status)
      },
      deleteDept(index,row){
        this.$confirm('确定要删除吗?', '信息', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$axios.deleteDept({id:row.id}).then(res=>{
            if (res.code===0) {
              this.getMenuList()
              this.$message({
                type: 'success',
                message: '删除成功！'
              })
            }
          }).catch(err=>{
              console.log('deleteDeptErr',err)
          })
        })
      },
      // 关闭编辑、增加弹出框
      closeDialog(dialog) {
        if (dialog == 'edit') {
          this.menuFormVisible = false
        }
      },
      addMenu(row){
        this.menuFormVisible = true
        this.title='添加菜单'
        if( this.$refs['menuForm']){
          this.$refs['menuForm'].resetFields()
        }
        this.menuForm.menuId=""
        // 把v-modle绑定的值设为null，必须是null，不能是‘null’，初始化的时候才不会出现unknown。
        this.menuForm.parentId=null
        this.menuForm.menuName=""
        this.menuForm.orderNum=""
        this.menuForm.menuType=Number("0")
        this.menuForm.perms=""
        this.menuForm.icon=""
        this.menuForm.url=""
        this.menuForm.remark=""
        this.getMenuTreeList();
        if (row != null) {
          this.menuForm.parentId = row.id;
        }
      },
      getMenuTreeList(){
        this.$axios.getMenuTreeList(this.formInline).then(res=>{
          if (res.code === 0) {
            this.menuOptions=res.data;
            console.log("menuOptions"+this.menuOptions);
          }

        }).catch(err=>{
          console.log("menuOptions",err);
        })
      },
      submitForm(menuForm){
        this.$refs[menuForm].validate(valid => {

          if (valid) {
            this.loading = true
            // 请求方法
            if(this.menuForm.menuId){
               this.$axios.updateMenu(this.menuForm).then(res=>{
                 this.loading = false
                 if (res.code===0) {
                   this.menuFormVisible = false
                   this.getMenuList()
                   this.$message({
                     type: 'success',
                     message: '修改成功！'
                   })
                 }
               }).catch(err=>{
                 console.log('updateDeptErr',err);
                 this.loading = false
               })
            }else{
              this.$axios.saveMenu(this.menuForm).then(res => {
                  this.loading = false
                  if (res.code===0) {
                    this.menuFormVisible = false
                    this.getMenuList()
                    this.$message({
                      type: 'success',
                      message: '保存成功！'
                    })
                  }
                }).catch(err=>{
                  console.log('saveDeptErr',err);
                  this.loading = false
              })


            }
          } else {
            return false
          }
        })
      }
    }
  }
</script>

<style scoped>
  .user-search {
    margin-top: 20px;
  }
</style>


